<template>
	<view class="content">
		<view class="head_box box_shadow">
			<view class="label" :class="{alabel: orderActive===item.id}" v-for="(item, index) in orderMenu" :key="index"
				@click="selectMenuTap(item.id)">
				<view class="tit" :style="{borderColor: orderActive===item.id?'#F54319':'#fff'}">{{item.name}}</view>
			</view>
		</view>
		<view class="order_list_box">
			<view class="order box_shadow" v-for="(item, index) in orderList" :key="index"
				@click="getDetailsTap(item.id)">
				<view class="head">
					<view class="right">
						<span v-if="item.orderStatus===0">待付款</span>
						<span v-else-if="item.orderStatus===2">待发货</span>
						<span v-else-if="item.orderStatus===1">已付款</span>
						<span v-else-if="item.orderStatus===3">待收货</span>
						<span v-else-if="item.orderStatus===7">已失效</span>
						<span v-else-if="item.orderStatus===5">已完成</span>
						<span v-else-if="item.orderStatus===8">退款中</span>
						<span v-else-if="item.orderStatus===9">已退款</span>
					</view>
				</view>
				<view class="goods_box">
					<view class="goods" v-for="item2 in item.orderItemList" :key="item2.id">
						<view class="left">
							<view class="" v-if="item2.goodsSpecification!==null">
								
								<image v-if="item2.goodsSpecification.specificationImages!==''"
									:src="item2.goodsSpecification.specificationImages" lazy-load="true"
									mode="aspectFill"></image>
								<image v-else :src="item2.plugsGoods.rotationImgsJson[0]" lazy-load="true" mode="aspectFill"></image>
							</view>
							<image v-else :src="item2.plugsGoods.rotationImgsJson[0]" lazy-load="true" mode="aspectFill">
							
							</image>
						</view>
						<view class="right">
							<view class="">
								<view class="title">{{item2.goodName}}</view>
							</view>
							<view class="">
								<view class="goodsSpecification" v-if="item2.goodsSpecification!==null">
									<view class="text"
										v-for="(value,key) in JSON.parse(item2.goodsSpecification.specificationName)"
										:key="key">{{key+':'+value}}</view>
								</view>
							</view>
							<view class="box">
								<view class="">
									<view class="num" v-if="item2.goodsSpecification!==null">
										￥{{item2.goodsSpecification.dealPrice}}<span>元</span></view>
									<view class="num" v-else>￥{{item2.goodsPrice}}元</view>
								</view>
								<view class="buy">x{{item2.goodsNum}}</view>
							</view>
						</view>
					</view>
				</view>
				<view class="foot">
					<view v-if="item.orderItemList[0].plugsGoods.goodsType==0"  class="left">实际支付：<span  :style="{color: '#F54319'}">{{item.payMoney}}元</span></view>
					<view v-if="item.orderItemList[0].plugsGoods.goodsType==1"  class="left">实际支付：<span  :style="{color: '#F54319'}">{{item.payMoney}}积分</span></view>
					<view class="right" v-if="item.orderItemList[0].plugsGoods.goodsType==0" >
						<view v-if="item.orderStatus==3" class="button" @click.stop="btnSure(item.id)" style="margin-right: 20rpx;">确认收货</view>
						<view v-if="item.orderStatus==0 && item.orderExpireRemainTime>0"
							:style="{backgroundColor: '#F54319', borderColor: '#F54319', color: '#fff'}" class="button"
							@click.stop="getPaypalOrder(item)">
							<span>立即支付</span>
							<u-count-down :time="item.orderExpireRemainTime*1000" format="mm:ss"></u-count-down>
						</view>
						<!-- <view class="refund button" v-if="item.orderStatus==2 || item.orderStatus==1">
							申请退款
						</view> -->
						<!-- <view v-else class="button" @click.stop="getOrderDel(item.id,index)">删除订单</view> -->
					</view>
					
				</view>
			</view>

			<view class="none_list_box" v-if="orderList.length===0">
				<image src="../../static/images/none_data_icon_02.png" lazy-load="true" mode="widthFix"></image>
				<span>暂无相关订单</span>
			</view>
		</view>

		<view class="seat_box">
			<view class="seat"></view>
		</view>
		<!-- <paypalType :paypalShow="paypalShow" :money="userData.moneys" @close="paypalShow=false" @paypal="getPaypalOrder"></paypalType> -->
	</view>
</template>

<script>
	import {
		searchUserOrderListByStatus,
		cancelOrder,
		delOrder,
		userApplyOrderRefund,confirmReceipt
	} from '../../static/utils/api.js';
	export default {
		data() {
			return {
				paypalShow: false,
				userData: '',
				nowBusinessInfo:{},
				top: 0,
				paypalOrder: '',
				templateConfig: uni.getStorageSync('templateConfig'),
				openId: uni.getStorageSync('openId'),
				
				payList: '',
				orderMenu: [{
					id: -1,
					name: '全部'
				}, {
					id: 0,
					name: '待付款'
				}, {
					id: 2,
					name: '待发货'
				}, {
					id: 3,
					name: '待收货'
				}, {
					id: 5,
					name: '已完成'
				}],
				orderStatus:-1,
				orderActive: 0,
				orderPage: {
					page: 1,
					sizes: 10,
					total: 0
				},
				orderList: [],
			}
		},
		onLoad(e) {
			let that = this;
			if (e.id) {
				let id = Number(e.id);
				that.orderStatus = id;
				that.orderActive=id
			}
		},
		
		onShow() {
			this.nowBusinessInfo = uni.getStorageSync('nowBusinessInfo');
			let that = this;
			that.orderPage.page = 1;
			that.orderList = [];
			that.getOrderList();
		},
		onReachBottom() {
			let that = this;
			if (that.orderPage.total > that.orderPage.page) {
				that.orderPage.page++;
				that.getOrderList();
			}
		},
		methods: {
			selectMenuTap(id) {
				let that = this;
				that.orderActive = id;
				that.orderStatus=id;
				that.orderPage.page = 1;
				that.orderList = [];
				that.getOrderList();
			},
			getOrderList() {
				let that = this;
				uni.showLoading({
					title: '加载中...',
					mask: true
				});
				let curt = that.orderActive;
				let postData = {
					startPage: that.orderPage.page,
					orderStatus: that.orderStatus
				}
				searchUserOrderListByStatus(postData).then(res => {
					if (res.code === 200) {
						res.body.list.forEach((item=>{
							item.orderItemList.forEach((element=>{
								if(element.plugsGoods.rotationImgsJson){
									element.plugsGoods.rotationImgsJson=JSON.parse(element.plugsGoods.rotationImgsJson)
								}
							}))
						}))
						let datas = res.body;
						uni.hideLoading();
						that.orderPage.total = datas.pages;
						let data = res.body.list;
						if (datas.pages > 1) {
							let list = that.orderList.concat(data);
							that.orderList = list;
						} else {
							that.orderList = data;
						}
					}
				})
			},
			getorderDetail() {
				let that = this;

			},
			getPaypalOrder(item) {
				setTimeout(() => {
				  uni.navigateTo({
				    url: `/pages/order/pay?info=${encodeURIComponent(
				      JSON.stringify(item)
				    )}`,
				  });
				}, 300);
			},
			
			getOrderDel(i, index) {
				let that = this;
				let postData = `ids=${i}`
				uni.showModal({
					title: '订单删除确认',
					content: '订单删除后不可恢复，是否继续删除？',
					success(ces) {
						if (ces.confirm) {
							uni.showLoading({
								title: '准备删除中',
								mask: true
							});
							delOrder(postData).then(res => {
								if (res.code === 200) {
									uni.hideLoading();
									uni.showToast({
										title: '订单删除成功'
									});
									that.orderList.splice(index, 1);
									that.getOrderList()
								} else {
									uni.hideLoading();
									uni.showModal({
										title: '订单删除失败',
										content: res.msg,
										showCancel: false
									})
								}
							})
						}
					}
				})
			},
			
			getDetailsTap(id) {
				uni.navigateTo({
					url: `/pages/order/orderDetail?id=${id}`
				})
			},
			btnSure(item){
				let data={
					orderId:item.toString()
				}
				confirmReceipt(data).then(res=>{
					if(res.code==200){
						uni.showToast({
							title:'收货成功'
						})
						this.getOrderList();
					}
				})
			}
		}
	}
</script>

<style lang="less">
	page {
		background-color: #fff;
	}

	.head_box {
		display: flex;
		align-items: center;
		height: 120rpx;
		background-color: #fff;
		position: sticky;
		top: 0;
		left: 0;
		z-index: 100;
		border-bottom: 3rpx solid #f5f5f5;

		.label {
			flex: 1;
			height: 100%;
			display: flex;
			align-items: center;
			justify-content: center;

			.tit {
				color: #666;
				transition: all 0.2s;
				padding-top: 6rpx;
				border-bottom: 3px solid transparent;
				padding-bottom: 10rpx;
				font-size: 30rpx;
			}
		}

		.alabel {
			.tit {
				color: #1c1c1c;
				font-weight: bold;
				border-color: #00d389;
			}
		}
	}

	.order_list_box {
		width: 100%;
		min-height: 72vh;

		.order {
			width: 100%;
			margin: 0 auto;
			border-radius: 20rpx;
			background-color: #fff;
			margin-bottom: 30rpx;
			border-bottom: 3rpx solid #f5f5f5;

			.head {
				display: flex;
				align-items: center;
				width: 92%;
				margin: 0 auto;
				height: 80rpx;
				justify-content: space-between;

				.left {
					color: #999;
					font-size: 28rpx;
					display: flex;
					align-items: center;

					span {
						background-color: #F54319;
						color: #fff;
						font-size: 24rpx;
						width: 36rpx;
						height: 36rpx;
						display: flex;
						align-items: center;
						justify-content: center;
						border-radius: 6rpx;
						margin-left: 20rpx;
						line-height: 36rpx;
					}
				}
			}

			.goods_box {
				width: 92%;
				margin: 0 auto;
				background-color: #f5f5f5;
				border-radius: 20rpx;

				.goods {
					display: flex;
					align-items: center;
					padding: 20rpx 0;

					.left {
						width: 190rpx;
						display: flex;
						align-items: center;
						justify-content: center;

						image {
							width: 150rpx;
							height: 150rpx;
							box-sizing: border-box;
							border-radius: 20rpx;
							background-color: #fff;
						}
					}

					.right {
						flex: 1;
						min-width: 0;
						height: 150rpx;
						display: flex;
						flex-direction: column;
						box-sizing: border-box;
						justify-content: space-between;
						position: relative;

						.goodsSpecification {
							position: relative;
							color: #666;
							width: 95%;
							font-size: 26rpx;
							display: -webkit-box; //将对象作为弹性伸缩盒子模型显示
							-webkit-box-orient: vertical; //设置或检索伸缩盒对象的子元素的排列方式
							-webkit-line-clamp: 2; //一个块元素显示的文本的行数
							overflow: hidden; //溢出隐藏
							// .text{

							// }
							.num {
								position: absolute;
								bottom: -70rpx;
								left: 0;
							}
						}

						.title {
							color: #1c1c1c;
							font-size: 28rpx;
							white-space: nowrap;
							overflow: hidden;
							text-overflow: ellipsis;
							width: 95%;

						}


						.box {
							display: flex;
							align-items: center;
							justify-content: space-between;
							width: 95%;
							padding-bottom: 10rpx;

							.num {
								color: #1c1c1c;
								font-size: 30rpx;
								display: flex;
								align-items: center;

								span {
									font-size: 26rpx;
									padding-left: 2rpx;
								}
							}

							.buy {
								color: #1c1c1c;
								padding: 0 10rpx;
								border-radius: 10rpx;
							}
						}
					}
				}
			}

			.foot {
				width: 92%;
				margin: 0 auto;
				display: flex;
				align-items: center;
				justify-content: space-between;
				height: 100rpx;

				.left {
					color: #1c1c1c;
					font-size: 28rpx;

					span {
						font-weight: bold;
						color: #f14b5b;
					}
				}

				.right {
					flex: 1;
					display: flex;
					justify-content: flex-end;

					.button {
						border: 1px solid #e5e5e5;
						color: #666;
						font-size: 28rpx;
						padding: 0 20rpx;
						border-radius: 100rpx;
						line-height: 28rpx;
						display: flex;
						align-items: center;
						height: 50rpx;
						position: relative;

						button {
							position: absolute;
							width: 100%;
							height: 100%;
							top: 0;
							left: 0;
							opacity: 0;
						}

						/deep/.u-count-down__text {
							font-size: 28rpx;
							color: #fff;
							padding-left: 4rpx;
						}
					}
				}
			}
		}
	}
</style>